<!-- 组件使用：
	<scroll-tab class="scroll-tab" :tabData="tabData" @tabMsg="tabMsg"></scroll-tab>

	import { scrollTab } from '@/components/pageComponents/sp-order/scroll-tab';

	components: { scrollTab },
	data() {
		return {
			tabData: [
				{
					name: '全部',
					value: '',
					icon: ''
				},
				{
					name: '待支付',
					value: 'WAITING',
					icon: ''
				},
				{
					name: '进行中',
					value: 'UNDERWAY',
					icon: 'icon-biaotou-kepaixu'
				},
				{
					name: '已完成',
					value: 'FINISH',
					icon: ''
				},
				{
					name: '已退款',
					value: 'CANCEL',
					icon: ''
				}
			]
		};
	},
	methods: {
		tabMsg(val){
			console.log('tabMsg',val)
		}
	}
-->
<template>
  <scroll-view
    class="scroll-view"
    scroll-x="true"
    @scroll="scroll"
    scroll-left="0"
  >
    <view
      v-for="(item, index) in tabData"
      :key="index"
      @click="handleTab(item, index)"
      class="scroll-view-item"
    >
      <view
        :style="{ color: active === index ? '#ffb72f' : '' }"
        class="box flexAIC"
      >
        <view :class="{ borderColor: active === index }">{{ item.name }}</view>
        <view class="marginLeft-5" v-if="item.isSort">
          <u-icon
            size="8"
            :color="active === index && item.sort === 1 ? themeColor : 'black'"
            name="arrow-up-fill"
          ></u-icon>
          <u-icon
            size="8"
            :color="active === index && item.sort === 0 ? themeColor : 'black'"
            name="arrow-down-fill"
          ></u-icon>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  props: {
    tabData: {
      type: Array,
      detail: ["全部"],
    },
    activeTab: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      active: 0,
    };
  },
  watch: {
    activeTab(index) {
      if (this.active !== index) {
        this.handleTab(this.tabData[index], index);
        console.log("this.tabData[val]", this.tabData[index], index);
      }
    },
  },
  methods: {
    scroll: function (e) {
      // console.log(e);
    },
    handleTab(val, index) {
      this.active = index;
      this.$emit("tabMsg", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-view {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item {
  display: inline-block;
  font-size: 29rpx;
  line-height: 86rpx;
  text-align: center;
  font-weight: 500;
  padding: 0 27rpx;
  margin-left: 26rpx;

  .box {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .borderColor {
    border-bottom: 4rpx solid #ffb72f;
  }
}
.scroll-view-item:nth-of-type(1) {
  margin-left: 21rpx;
}
.scroll-view-item:nth-last-of-type(1) {
  margin-right: 21rpx;
}
</style>
